import {messages} from "share/common";
import React from 'react'
import { connect } from 'react-redux'


import { Alert, Form, Switch, Icon, Input, Select, Button, Row, Col, message } from 'antd'
const FormItem = Form.Item;
const Option = Select.Option;

import 'styles/budget-setting/budget-organization/new-budget-organization.scss'
import budgetOrganizationService from 'containers/budget-setting/budget-organization/budget-organnization.service'
import { LanguageInput } from 'components/template';

class UpdateBudgetOrganization extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      i18n: props.params.i18n || {},
      organizationName: ''
    };
  }

  onCancel = () => {
    this.props.close();
  };

  handleSave = (e) => {
    e.preventDefault();
    const { i18n } = this.state;
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.setState({loading: true});
        let params = {
          i18n,
          id: this.props.params.id,
          isEnabled: values.isEnabled,
          organizationCode: this.props.params.organizationCode,
          organizationName: values.organizationName,
          tenantId: this.props.params.tenantId,
          setOfBooksId: this.props.params.setOfBooksId,
          versionNumber: this.props.params.versionNumber
        };
        budgetOrganizationService.updateOrganization(params).then((res)=>{
          this.setState({loading: false});
          message.success(messages('common.save.success', {name: values.organizationName}));  //保存成功
          this.props.close(true);
        }).catch((e)=>{
          if(e.response){
            message.error(`保存失败, ${e.response.data.message}`);
          }
          this.setState({loading: false});
        })
      }
    });
  };

  handleI18n = (name, value) => {
    let { i18n, organizationName } = this.state;
    i18n.organizationName = value;
    organizationName = name;
    this.setState({ organizationName, i18n });
  };

  render(){

    const { getFieldDecorator } = this.props.form;
    const { i18n, organizationName } = this.state;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 10, offset: 1 },
    };
    return (
      <div className="new-budget-organization">
        <Alert
          message={messages('common.help')/*提示信息*/}
          description={messages('budget-setting.key216'/*同一账套下只能有一个生效的预算组织代码，且同一租户下预算组织代码不允许重复。保存后不可修改。*/)}
          type="info"
          showIcon
        />
        <Form onSubmit={this.handleSave}>
          <FormItem {...formItemLayout} label={messages('budget-setting.key123'/*账套*/)}>
            {getFieldDecorator('setOfBooksName', {
              rules: [{
                required: true
              }],
              initialValue: this.props.params.setOfBooksName
            })(
              <Select disabled/>
            )}
          </FormItem>
          <FormItem {...formItemLayout} label={messages('budget-setting.key121'/*预算组织代码*/)}>
            {getFieldDecorator('organizationCode', {
              rules: [{
                required: true
              }],
              initialValue: this.props.params.organizationCode
            })(
              <Input disabled/>
            )}
          </FormItem>
          <FormItem {...formItemLayout} label={messages('budget-setting.key122'/*预算组织名称*/)}>
            {getFieldDecorator('organizationName', {
              rules: [{
                required: true,
                message: messages('common.please.enter'),  //请输入
              }],
              initialValue: this.props.params.organizationName
            })(
              <LanguageInput
                name={organizationName}
                isEdit
                i18nName={i18n.organizationName || null}
                nameChange={this.handleI18n}
                placeholder={messages('common.please.enter')/* 请输入 */}/>
            )}
          </FormItem>
          <FormItem {...formItemLayout} label={messages('common.column.status')/* 状态 */}>
            {getFieldDecorator('isEnabled', {
              initialValue: this.props.params.isEnabled,
              valuePropName: 'checked'
            })(
              <Switch checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="cross" />}/>
            )}&nbsp;&nbsp;&nbsp;&nbsp;{this.props.form.getFieldValue('isEnabled') ? messages('common.status.enable') : messages('common.status.disable')}
          </FormItem>
          <div className="slide-footer">
            <Button type="primary" htmlType="submit" loading={this.state.loading}>{messages('common.save')/* 保存 */}</Button>
            <Button onClick={this.onCancel}>{messages('common.cancel')/* 取消 */}</Button>
          </div>
        </Form>
      </div>
    )
  }

}

function mapStateToProps() {
  return {}
}
const WrappedUpdateBudgetOrganization = Form.create()(UpdateBudgetOrganization);

export default connect(mapStateToProps)(WrappedUpdateBudgetOrganization);
